<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>scroll</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
      div{
	     width:200px;
		 height:300px;
		 border:1px black solid;
		 overflow:scroll;
	  }
  </style>
 </head>
 <body>
    <div>
	   <p>scroll scroll scroll scroll scroll scroll scroll
	   scroll scroll scroll scroll scroll scroll scroll scroll
	    scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		 scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll
		  scroll scroll scroll  scroll scroll scroll  scroll
		   scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		 scroll scroll scroll  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll  scroll scroll
	   scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
	    scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		 scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll
		 scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll 
		  scroll scroll scroll  scroll scroll scroll  scroll scroll scroll </p>
	</div>
	<button id="btn1">获取滚动条的位置</button><br>
	<button id="btn2">滚动条滚动到指定的位置</button><br>
	<button id="btn3">滚动到顶部</button>
	<button id="btn4">滚动到下部</button>

 </body>
 <script>
     var $_div = $("div");
	 $("#btn1").click(function(){
	    console.log($_div.scrollLeft()+";"+$_div.scrollTop());
	 });

     $("#btn2").click(function(){
	 
	    $_div.scrollTop(200);
	 });

	 var clearSetIntervar;
	 $("#btn3").click(function(){
		var scroll_y = $_div.scrollTop();
	    clearSetIntervar = setInterval(function(){
            scroll_y = scroll_y - 5;
            if(scroll_y > 0){
			    $_div.scrollTop(scroll_y);
			}else{
			    $_div.scrollTop(0);
                clearInterval(clearSetIntervar);
			}  
		},100);
	 });

     
     var clearSetIntervar1;
     $("#btn4").click(function(){
	    var scroll_y = $_div.scrollTop();
        clearSetIntervar1 = setInterval(function(){
		   scroll_y = scroll_y + 5;
		   if(scroll_y < 476){
		      $_div.scrollTop(scroll_y);
		   }else{
		      $_div.scrollTop(476);
			  clearInterval( clearSetIntervar1);
		   }
		},100);
	 });
 </script>
</html>
